<!DOCTYPE html>
<html lang="en">

<head>
    <title>控制台</title>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css" media="all">
    <script src="/js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/echarts.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>
    <div class="x-body layui-anim layui-anim-up" id="box">
        <!-- 欢迎信息 -->
        <blockquote class="layui-elem-quote">欢迎管理员：
            <span class="x-blue">{{loginAdmin.adminNickname}}</span>
        </blockquote>
        <!-- 数字显示数据统计 -->
        <fieldset class="layui-elem-field">
            <legend>数据统计</legend>
            <div class="layui-field-box">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim=""
                                lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 90px;">
                                <div carousel-item="">
                                    <ul class="layui-row layui-col-space10 layui-this">
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>总文章数量</h3>
                                                <p>
                                                    <cite id="userNum">{{datalist.allArticleCount}}</cite>
                                                </p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>审核通过文章数量</h3>
                                                <p>
                                                    <cite id="bookNum">{{datalist.passArticleCount}}</cite>
                                                </p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>待审核文章数量</h3>
                                                <p>
                                                    <cite id="startBookNum">{{datalist.waitCheckArticleCount}}</cite>
                                                </p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>博客用户数量</h3>
                                                <p>
                                                    <cite id="endBookNum">{{datalist.bloguserCount}}</cite>
                                                </p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>课程总数量</h3>
                                                <p>
                                                    <cite id="bookTypeNum">{{datalist.allCourseCount}}</cite>
                                                </p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs2">
                                            <a href="javascript:;" class="x-admin-backlog-body">
                                                <h3>当月课程总收益</h3>
                                                <p>
                                                    <cite id="borrowNum">{{datalist.sumMonthCourseEarnings}}</cite>
                                                </p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
        <!-- Echarts数据统计 -->
        <!-- 后台管理员统计(报名请情况，统计该课程的收益，评论最多的前五名博客) -->
        <fieldset class="layui-elem-field">
            <legend>数据统计</legend>
            <!-- 图书类型对应图书数量 -->
            <div class="col-sm-4">
                <section class="panel">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div class="echarts" id="area" style="height:300px; height:350px"></div>
                    </div>
                </section>
            </div>
            <!-- 前五名热门借阅书籍 -->
            <div class="col-sm-4">
                <section class="panel">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div class="echarts" id="main" style="height:300px; height:350px">
                        </div>
                    </div>
                </section>
            </div>
            <!-- 各类型图书借阅数量 -->
            <div class="col-sm-4">
                <section class="panel">
                    <div class="panel-heading"></div>
                    <div class="panel-body">
                        <div class="echarts" id="years" style="height:300px; height:350px">
                        </div>
                    </div>
                </section>
            </div>
        </fieldset>
        <!-- 系统信息 -->
        <!-- <fieldset class="layui-elem-field">
            <legend>系统信息</legend>
            <div class="layui-field-box">
                <table class="layui-table">
                    <tbody>
                        <tr>
                            <th>博客版本</th>
                            <td>1.0.0</td>
                        </tr>
                        <tr>
                            <th>服务器</th>
                            <td>Centos7</td>
                        </tr>
                        <tr>
                            <th>服务器地址</th>
                            <td>182.92.178.132:8080</td>
                        </tr>
                        <tr>
                            <th>操作系统</th>
                            <td>Linux</td>
                        </tr>
                        <tr>
                            <th>运行环境</th>
                            <td>Tomcat8.5</td>
                        </tr>
                        <tr>
                            <th>JDK版本</th>
                            <td>1.8</td>
                        </tr>
                        <tr>
                            <th>MYSQL版本</th>
                            <td>8.0.26</td>
                        </tr>
                        <tr>
                            <th>Maven</th>
                            <td>3.8.3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </fieldset> -->
        <!-- 开发团队 -->
        <!-- <fieldset class="layui-elem-field">
            <legend>开发团队</legend>
            <div class="layui-field-box">
                <table class="layui-table">
                    <tbody>
                        <tr>
                            <th>版权所有</th>
                            <td>@Jiang</td>
                        </tr>
                        <tr>
                            <th>开发者</th>
                            <td>Jiang</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </fieldset> -->
        <!-- 底部感谢栏 -->
        <!-- <blockquote class="layui-elem-quote layui-quote-nm">
            感谢layui,bootstrap,Echarts,jquery,本系统由L-admin提供技术支持。
        </blockquote> -->
    </div>

    <script>
        var obj = {
            data () {
                return {
                    datalist: [],
                    loginAdmin: [],
                    // 本月课程收益饼图
                    data1: [],// 点击部分数据
                    data2: [],// 图表内部数据
                    // 文章与类型对应条形图
                    data3: [],// 图表内部数据
                    data4: [],// 图表内部数据
                    // 全部课程收益饼图
                    data5: [],// 图表内部数据
                    data6: [],// 图表内部数据
                }
            },
            mounted () {
                axios({
                    method: 'get',
                    url: '/console',
                }).then(function (result) {
                    vm.datalist = result.data.data;
                    vm.loginAdmin = result.data.data.loginAdmin;
                    $.each(result.data.data.monthCourseEarningsMap, function (key, value) {
                        vm.data1.push(key);
                        vm.data2.push({ value: value, name: key });
                    });
                    $.each(result.data.data.articleNumByTypeMap, function (key, value) {
                        vm.data3.push(key);
                        vm.data4.push(value);
                    });
                    $.each(result.data.data.allCourseEarningsMap, function (key, value) {
                        vm.data5.push(key);
                        vm.data6.push({ value: value, name: key });
                    });
                    vm.drawChart1();
                    vm.drawChart2();
                    vm.drawChart3();
                });

            },
            methods: {
                // 本月课程收益饼图
                drawChart1 () {
                    // 指定图表的配置项和数据
                    var myChart = echarts.init(document.getElementById("area"));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: "本月课程收益",
                            subtext: "（元）",
                            x: "center",
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)",
                        },
                        itemStyle: {
                            normal: {
                                //好，这里就是重头戏了，定义一个list，然后根据索引取得不同的值，这样就实现了，
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        "#27C24C",
                                        "#F05050",
                                        "#23b7e5",
                                        "#7266ba",
                                        "#18bc9c",
                                        "#FE8463",
                                        "#9BCA63",
                                        "#FAD860",
                                        "#F3A43B",
                                        "#60C0DD",
                                        "#D7504B",
                                        "#C6E579",
                                        "#F4E001",
                                        "#F0805A",
                                        "#26C0C0",
                                    ];
                                    return colorList[params.dataIndex];
                                },
                                //以下为是否显示，显示位置和显示格式的设置了
                                label: {
                                    show: true,
                                    position: "top",
                                    formatter: "{b}\n{c}",
                                },
                            },
                        },
                        legend: {
                            orient: "vertical",
                            left: "left",
                            data: vm.data1,
                        },
                        series: [
                            {
                                name: "课程名称对应课程收益",
                                type: "pie",
                                radius: "55%",
                                center: ["50%", "60%"],
                                data: vm.data2,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: "rgba(0, 0, 0, 0.5)",
                                    },
                                },
                            },
                        ],
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    myChart.currentIndex = -1;
                    setInterval(function () {
                        var dataLen = option.series[0].data.length;
                        // 取消之前高亮的图形
                        myChart.dispatchAction({
                            type: "downplay",
                            seriesIndex: 0,
                            dataIndex: myChart.currentIndex,
                        });
                        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
                        // 高亮当前图形
                        myChart.dispatchAction({
                            type: "highlight",
                            seriesIndex: 0,
                            dataIndex: myChart.currentIndex,
                        });
                    }, 1000);
                    // 使用刚指定的配置项和数据显示图表。
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });

                },

                // 文章与类型对应条形图
                drawChart2 () {
                    // 基于准备好的dom，初始化echarts实例
                    var myChart2 = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    var option2 = {
                        title: {
                            text: '各类型文章数量'
                        },
                        tooltip: {},
                        xAxis: {
                            data: vm.data3
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '文章数量',
                                type: 'bar',
                                data: vm.data4
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart2.setOption(option2);
                },

                // 全部课程收益饼图
                drawChart3 () {
                    // 指定图表的配置项和数据
                    var myChart3 = echarts.init(document.getElementById("years"));
                    // 指定图表的配置项和数据
                    var option3 = {
                        title: {
                            text: "全部课程收益饼图",
                            subtext: "（元）",
                            x: "center",
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)",
                        },
                        itemStyle: {
                            normal: {
                                //好，这里就是重头戏了，定义一个list，然后根据索引取得不同的值，这样就实现了，
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        "#27C24C",
                                        "#F05050",
                                        "#23b7e5",
                                        "#7266ba",
                                        "#18bc9c",
                                        "#FE8463",
                                        "#9BCA63",
                                        "#FAD860",
                                        "#F3A43B",
                                        "#60C0DD",
                                        "#D7504B",
                                        "#C6E579",
                                        "#F4E001",
                                        "#F0805A",
                                        "#26C0C0",
                                    ];
                                    return colorList[params.dataIndex];
                                },
                                //以下为是否显示，显示位置和显示格式的设置了
                                label: {
                                    show: true,
                                    position: "top",
                                    // formatter: '{c}'
                                    formatter: "{b}\n{c}",
                                },
                            },
                        },
                        legend: {
                            orient: "vertical",
                            right: "right",
                            data: vm.data5,
                        },
                        series: [
                            {
                                name: "课程名称对应课程收益",
                                type: "pie",
                                radius: "55%",
                                center: ["50%", "60%"],
                                data: vm.data6,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: "rgba(0, 0, 0, 0.5)",
                                    },
                                },
                            },
                        ],
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart3.setOption(option3);
                }
            },

        }
        var vm = Vue.createApp(obj).mount("#box")
    </script>

</body>

</html>